<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of Three Masses</title>
</head>
<body>

<canvas id="physics_diagram" width="550" height="400"></canvas>

<script>
    const canvas = document.getElementById('physics_diagram');
    const ctx = canvas.getContext('2d');

    // --- Style and Configuration ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Coordinates and Parameters ---
    const pointRadius = 4;
    const Bx = 250, By = 250;
    const lengthAB = 180;
    const Ax = Bx - lengthAB;
    const Ay = By;

    const angleDegrees = 35;
    const angleRad = -angleDegrees * Math.PI / 180; // Negative because canvas y-axis points down
    const lengthBC = 170;
    const Cx = Bx + lengthBC * Math.cos(angleRad);
    const Cy = By + lengthBC * Math.sin(angleRad);

    // --- Helper function for drawing an arrow ---
    function drawArrow(ctx, fromx, fromy, tox, toy) {
        const headlen = 10;
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        // Main line
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        // Arrowhead
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Start Drawing ---

    // 1. Draw connecting lines (ropes)
    ctx.beginPath();
    ctx.moveTo(Ax, Ay);
    ctx.lineTo(Bx, By);
    ctx.lineTo(Cx, Cy);
    ctx.stroke();

    // 2. Draw masses as filled circles at points A, B, C
    ctx.beginPath();
    ctx.arc(Ax, Ay, pointRadius, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(Bx, By, pointRadius, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(Cx, Cy, pointRadius, 0, 2 * Math.PI);
    ctx.fill();

    // 3. Draw labels for points and masses
    // Point A
    ctx.font = '20px Times New Roman';
    ctx.fillText('A', Ax, Ay + 20);
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('m', Ax - 5, Ay - 20);
    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText('1', Ax + 4, Ay - 15);

    // Point B
    ctx.font = '20px Times New Roman';
    ctx.fillText('B', Bx, By + 20);
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('m', Bx + 15, By - 20);
    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText('2', Bx + 24, By - 15);

    // Point C
    ctx.font = '20px Times New Roman';
    ctx.fillText('C', Cx + 20, Cy + 5);
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('m', Cx - 10, Cy - 20);
    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText('3', Cx - 1, Cy - 15);

    // 4. Draw angle representation (α)
    // Dashed horizontal line from B
    const dashedLineLength = 50;
    ctx.beginPath();
    ctx.setLineDash([5, 3]);
    ctx.moveTo(Bx, By);
    ctx.lineTo(Bx + dashedLineLength, By);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // Angle arc
    const angleArcRadius = 35;
    ctx.beginPath();
    ctx.arc(Bx, By, angleArcRadius, angleRad, 0); // Draws from BC line to horizontal line
    ctx.stroke();

    // Angle label 'α'
    ctx.font = 'italic 20px Times New Roman';
    const angleLabelRadius = angleArcRadius - 12;
    const angleLabelX = Bx + angleLabelRadius * Math.cos(angleRad / 2);
    const angleLabelY = By + angleLabelRadius * Math.sin(angleRad / 2);
    ctx.fillText('α', angleLabelX, angleLabelY);

    // 5. Draw impulse vector I
    const impulseLength = 70;
    const impulseEndX = Cx + impulseLength * Math.cos(angleRad);
    const impulseEndY = Cy + impulseLength * Math.sin(angleRad);
    drawArrow(ctx, Cx, Cy, impulseEndX, impulseEndY);

    // Impulse label 'I'
    ctx.font = 'italic bold 22px Times New Roman';
    ctx.fillText('I', impulseEndX + 15, impulseEndY - 15);

    // 6. Draw the caption
    ctx.font = '20px "SimSun", serif'; // Use a font that supports Chinese characters
    ctx.fillStyle = 'black';
    ctx.fillText('力图 3.15.1', canvas.width / 2, By + 80);

</script>

</body>
</html>